<template>
  <div>
    <Breadcrumb :style="{margin: '24px 0'}">
      <BreadcrumbItem>知识管理</BreadcrumbItem>
      <BreadcrumbItem>
        <router-link to="/index/personManage">人员管理</router-link>
      </BreadcrumbItem>
    </Breadcrumb>
    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
      <div class="messageTitle message">
        <div style="width:20%;">用户id</div>
        <div style="width:20%;">用户名</div>
        <div style="width:20%;">角色</div>
        <div style="width:20%;">状态</div>
        <div style="width:20%;">操作</div>
      </div>
      <div>
        <div class="message" v-for="(item,index) in showList" :key="index">
          <div style="width:20%;">{{item.id}}</div>
          <div style="width:20%;">{{item.username}}</div>
          <div style="width:20%;">{{item.type}}</div>
          <div style="width:20%; color:green;" v-if="item.isDeleted=='正常'">{{item.isDeleted}}</div>
          <div style="width:20%; color:gray;" v-else-if="item.isDeleted=='封号'">{{item.isDeleted}}</div>
          <div style="width:20%;">
            <Button type="info" size="small" ghost @click="setLimit = true; limitModal(item.id)">权限设置</Button>
            <!-- 权限设置对话框 -->
            <Modal v-model="setLimit" title="权限设置" width="400" @on-ok="confirmSet">
                <div>
                  <Form label-position="right" :label-width="100">
                    <FormItem label="用户角色">
                      <Select v-model="editUserDetil.type" style="width:200px">
                        <Option
                                                                  v-for = "item in userType"
                                                                :value  = "item.number"
                                                                :key    = "item.number"
                        >{{ item.name }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="用户状态">
                      <Select v-model="editUserDetil.isDeleted" style="width:200px">
                        <Option
                                                                  v-for = "item in userIsDeleted"
                                                                :value  = "item.number"
                                                                :key    = "item.number"
                        >{{ item.name }}</Option>
                      </Select>
                    </FormItem>
                  </Form>
                </div>
              </Modal>
          </div>
        </div>
      </div>
      <Page :total="dataCount" :page-size="pageSize" show-total @on-change="changePage1"/>
    </Content>
  </div>
</template>
<script>
import axios from "axios";
import { myGet, myPost } from "../utils/request.js";
import { url } from "../utils/api.js";
import { timeFormat } from "../utils/changeTime.js";
import { stateFormat } from "../utils/changeState.js";

export default {
  data() {
    return {
      userType:[
        {
          number: 2,
          name  : "普通管理员"
        },
        {
          number: 3,
          name  : "审核员"
        }
      ],
      userIsDeleted:[
        {
          number: 0,
          name  : "正常"
        },
        {
          number: 1,
          name  : "封号"
        }
      ],
      setLimit : false,     //权限设置对话框
      userDetil: {//初始用户信息
        type     : null,
        isDeleted: null
      },
      editUserDetil: {//编辑中用户信息
        type     : null,
        isDeleted: null
      },
      setID: null,

      detail  : false,   //详情对话框
      detilObj: {},

      totalList: [],
      showList : [],
      dataCount: 0,
      pageSize : 10
    };
  },
  methods: {
    // 确定修改权限
    confirmSet(){
      var that = this;
      if(that.userDetil.type != that.editUserDetil.type){
      let url    = this.Api.url.editUserType;  //用户类型
      let params = {
        id  : that.setID,
        type: that.editUserDetil.type
      };
      that.http.post(url, params).then(res => {
        that.$Message.success("修改用户类型成功!");
        localStorage.setItem("user_type", that.editUserDetil.type);
        that.init();
      });
      }
      if(that.userDetil.isDeleted != that.editUserDetil.isDeleted){
      let url    = this.Api.url.editUserState;  //用户状态
      let params = {
        id       : that.setID,
        isDeleted: that.editUserDetil.isDeleted
      };
      that.http.post(url, params).then(res => {
        that.$Message.success("修改用户状态成功!");
        that.init();
      });
      }
      
    },
    //权限设置对话框
    limitModal(id){
      var that       = this;
          that.setID = id;
      let url        = this.Api.url.userDetil;
      let params     = {
        id: id
      };
      that.http.get(url, {
          params: params
        }).then(res => {
        // console.log("用户信息",res)
        that.userDetil.type          = res.type;
        that.userDetil.isDeleted     = res.isDeleted;
        that.editUserDetil.type      = res.type;
        that.editUserDetil.isDeleted = res.isDeleted;
      });
    },
    //页数变化的时候改变每一页的内容
    changePage1(index) {
      console.log("页数变化", index);
      var _start        = (index - 1) * this.pageSize;
      var _end          = index * this.pageSize;
          this.showList = this.totalList.slice(_start, _end);
    },
    //分页加载和时间格式转换
    loadingPage(res) {
      var that           = this;
          that.totalList = res;
          this.dataCount = res.length;  //所有数据条数
      for (var i = 0; i < res.length; i++) {
        if (res[i].isDeleted == 0) {
          res[i].isDeleted = "正常";
        } else if (res[i].isDeleted == 1) {
          res[i].isDeleted = "封号";
        }
        if (res[i].type == 2) {
          res[i].type = "普通管理员";
        } else if (res[i].type == 3) {
          res[i].type = "审核员";
        }
      }
      if (that.dataCount < that.pageSize) {
        that.showList = that.totalList;
      } else {
        that.showList = that.totalList.slice(0, that.pageSize);
      }
    },
    init() {
      let that = this;
      var url  = that.Api.url.allAdmin;
      that.http.get(url).then(res => {
        that.loadingPage(res);
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>